javascript form 은 언제나 프론트엔드 개발자에게는 여러 의미로 숙제 입니다. 아마도 포맷팅이 가장 큰 숙제일텐데요. 놀라운 프레임워크가 나왔습니다.
2016/07/14 Editor’s choice
nosir/cleave.js
_cleave.js - Format input text content when you are typing_github.com
일단 샘플을 한번 보시죠.
Cleave.js - Format input text content when you are typing
_import React from ‘react’; import ReactDOM from ‘react-dom’; import Cleave from ‘cleave.js/react’; class MyComponent…_nosir.github.io
첫번째 샘플이 신용카드 포매팅인데 제가 6011 까지 입력했을때 Discover가 색깔이 들어 오는 것 보이시죠?
여기서 끝이 아닙니다.
KR을 지역코드로 입력하고 나니 정확하게 11자리 이상 입력이 안되는군요.
Block, Delimiter 등의 커스텀 옵션도 지원합니다.
설치
$npm install --save cleave.js
실행
<script src="cleave.min.js"\></script\>
<script src="cleave-phone.{country}.js"\></script\>
phone은 필요할 때만 넣으면 됩니다.
Common.js, AMD 모두 지원하며
React를 사용하실 때는 다음과 같이 사용하시면 됩니다.
import React from 'react';
import ReactDOM from 'react-dom';
import Cleave from 'cleave.js/react';
class MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.onCreditCardChange = this.onCreditCardChange.bind(this);
}
onCreditCardChange(event) {
// formatted pretty value
console.log(event.target.value);
// raw value
console.log(event.target.rawValue);
}
render() {
return (
<Cleave placeholder="Enter your credit card number"
options={{creditCard: true}}
onChange={this.onCreditCardChange} /\>
);
}
}
By Keen Dev on July 14, 2016.
Exported from Medium on May 31, 2017.